import React ,{ useState,useEffect }from 'react';
import { Paper, Grid, Typography, Box } from '@mui/material';
import hotvideo1 from '../resources/hotvideo/hotvideo1.png';
import hotvideo2 from '../resources/hotvideo/hotvideo2.png';
import hotvideo3 from '../resources/hotvideo/hotvideo3.png';
import hotvideo4 from '../resources/hotvideo/hotvideo4.png';
import hotvideo5 from '../resources/hotvideo/hotvideo5.png';
import hotvideo6 from '../resources/hotvideo/hotvideo6.png';
import hotvideo7 from '../resources/hotvideo/hotvideo7.png';
import hotvideo8 from '../resources/hotvideo/hotvideo8.png';
import hotvideo9 from '../resources/hotvideo/hotvideo9.png';
import hotvideo10 from '../resources/hotvideo/hotvideo10.png';
import hotvideo11 from '../resources/hotvideo/hotvideo11.png';
import hotvideo12 from '../resources/hotvideo/hotvideo12.png';
import hotvideo13 from '../resources/hotvideo/hotvideo13.png';
import hotvideo14 from '../resources/hotvideo/hotvideo14.png';
import hotvideo15 from '../resources/hotvideo/hotvideo15.png';
import hotvideo16 from '../resources/hotvideo/hotvideo16.png';
import { useNavigate } from 'react-router-dom';
import { fetchNewVideos } from '../api/recommend';
//new video!
function HotVideo() {
  // const videos = [
  //   { title: "东北街头麻辣烫，这量大的就逆天！", img: hotvideo1, id: 1 },
  //   { title: "Tung Tung Tung Sahur全面详解实战操作教学 有史以来最数值的杀", img: hotvideo2, id: 2 },
  //   { title: "花2980元学大锅卤菜？我这花0.65元学的怎么样？", img: hotvideo3, id: 3 },
  //   { title: "老板来碗牛肉面，不要面", img: hotvideo4, id: 4 },
  //   { title: "【Apex/卡莎】新晋队伍vkg第二天屡创佳绩！#20一跃#7😡！这是", img: hotvideo5, id: 1 },
  //   { title: "绝区零开服294天，也是被官方玩梗了qwq", img: hotvideo6, id: 2 },
  //   { title: "范小勤：gogogo出发咯", img: hotvideo7, id: 3 },
  //   { title: "215斤壮汉去吃必胜客自助，饭没吃饱吃了一肚子气！", img: hotvideo8, id: 4 },
  //   { title: "东北3元无敌自助餐 性价比的尽头！", img: hotvideo9, id: 1 },
  //   { title: "这款实时翻译神器，你一定不能错过，游戏动漫、电影网页、统统拿捏", img: hotvideo10, id: 2 },
  //   { title: "【原神科研所】70%大攻击的诱惑！慢脚希诺宁拐力大释放", img: hotvideo11, id: 3 },
  //   { title: "【VKG|卡莎】状态回暖！连续两把第三 电力区第三9杀", img: hotvideo12, id: 4 },
  //   { title: "带粉丝来参观，我徒手两年打造的秘密基地！地方虽小，但能练遍全", img: hotvideo13, id: 1 },
  //   { title: "faide艾许一镜到底，极限拉扯三队轻松制敌", img: hotvideo14, id: 2 },
  //   { title: "当你用3.2的遐蝶打1.0的混沌会怎样？", img: hotvideo15, id: 3 },
  //   { title: "tung tung tung tung sahur 完整版", img: hotvideo16, id: 4 },
  // ];
  const [videos, setVideos] = useState([]);
  const navigate = useNavigate();
  const userId = localStorage.getItem("id");
  useEffect(() => {
    fetchNewVideos(userId)
      .then(response => {
        console.log(response);
        setVideos(response);
      })
      .catch(error => {
        console.error('获取热门种子失败:', error);
      });
  }, []);
  const handleClick = (id) => {
    navigate(`/seed/${id}`);
  };
  return (
    <Paper sx={{ padding: 2 }}>
      <Grid container spacing={2}>
        {videos.map((video) => (
          <Grid item xs={6} sm={3} key={video.torrent.id}>
            <Box 
      onClick={() => handleClick(video.torrent.id)}
      sx={{
       
        '&:hover': {
          backgroundColor: "#f0f0f0",
        },
      }}
    >
              <img src={video.coverImageBase64}  style={{ 
                  width: '2', 
                  maxWidth: '250px',
                  borderRadius: '8px',
                  height: '150px',
                  objectFit: 'cover',
                  cursor: 'pointer'
                }}  />
              <Typography variant="body1" align="center" sx={{ 
                  mt: 1, 
                  textAlign: 'center',
                  fontWeight: 'medium',
                  maxWidth: '200px',
                  display: '-webkit-box',
                  overflow: 'hidden',
                  WebkitBoxOrient: 'vertical',
                  WebkitLineClamp: 2, 
                  textOverflow: 'ellipsis'
                }}>{video.torrent.name||video.torrent.fileName}</Typography>
            </Box>
          </Grid>
        ))}
      </Grid>
    </Paper>
  );
}

export default HotVideo;
